<template>
	<div class="over">
		<div class="title">
			<h3>安全生产投入管理</h3>
		</div>
		<div class="cont">
			<div class="cont-title">
				<span @click="tojihua">计划</span><span class="active">台账</span><span @click="toyuebao">月报</span>
			</div>
			<div class="cont-box">
				<div class="table">
					<el-table :data="tableData" style="width: 100%" class="tablebox" :header-cell-style="{background:'#FAFAFA',color:'#606266'}">
						<el-table-column prop="date" label="序号" width="80">
						</el-table-column>
						<el-table-column prop="name" label="年度" >
						</el-table-column>
						<el-table-column prop="pxmc" label="计划支出金额(元)">
						</el-table-column>
						<el-table-column prop="pxmc" label="实际支出金额(元)">
						</el-table-column>
						<el-table-column prop="pxrs" label="实际项目个数">
						</el-table-column>
						<el-table-column prop="pxrs" label="未完结项目个数">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="dialogFormVisible = true" type="text">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="fyq">
						<span>共 2 条数据</span>
						<div class="fyq-r">
							<el-pagination background layout="prev, pager, next" :total="10">
							</el-pagination>
							<select>
								<option selected="selected">10条/页</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="dyl">
			<el-dialog :visible.sync="dialogFormVisible" class="tc">
				<h3>安全生产投入计划明细</h3>
					<div class="left">
						<p>安全生产投入台账明细</p>
						<div class="left-box">
							年份:2018
							<el-button type="success">新建</el-button>
							<el-button class="purple"><i class="el-icon-download"></i>导出</el-button>
							<div class="tablebox">
								<table class="table2">
									<tr class="table-head">
										<th >序号</th>
										<th>安全投入类别</th>
										<th>项目名称</th>
										<th>计划支出金额</th>
										<th>计划开始时间</th>
										<th>计划结束时间</th>
										<th>实际支出金额</th>
										<th>实际开始时间</th>
										<th>计划结束时间</th>
										<th>操作</th>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
									<tr>
										<td>1</td>
										<td>完善维护和改造安全防护设施设备支出,不...</td>
										<td>33</td>
										<td>3</td>
										<td>2020-07-23</td>
										<td>2020-08-02</td>
										<td>20</td>
										<td>2020-08-12</td>
										<td>2020-08-21</td>
										<td class="blue">编辑</td>
									</tr>
								</table>
								<div class="fyq">
									<span>共 7 条数据</span>
									<div class="fyq-r">
										<el-pagination background layout="prev, pager, next" :total="10">
										</el-pagination>
										<select>
											<option selected="selected">10条/页</option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
	
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">关闭</el-button>
				</div>
			</el-dialog>
		</div>	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				add: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				tableData: [{
					date: '1',
					name: '2018',
					pxmc: "48",
					pxrs: '5',
				}, {
					date: '1',
					name: '2018',
					pxmc: "48",
					pxrs: '5',
				}, ]
			}
		},
		methods: {
			tojihua: function() {
				this.$router.push("/safeinput")
			},
			toyuebao: function() {
				this.$router.push("/safeinput3")
			}
		}
	}
</script>

<style>
	.table2 .blue{
		color:#4AAAFF ;
	}
	.table2 {
		border-bottom: 1px solid #E8E8E8;
		border-collapse: collapse;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		margin: 15px 0px;
	}
	
	.table2 th {
		border-bottom: 1px solid #E8E8E8;
		background: #FAFAFA;
		font-size: 14px;
		text-align: left;
		height: 30px;
	}
	
	.table2 td {
		border-bottom: 1px solid #E8E8E8;
		height: 50px;
		color: #7F7F7F;
		font-size: 12px;
	}
	.left-box{
		border: 1px solid #E8E8E8;
		padding: 20px 20px 0px 20px;
	}
	.add .el-dialog__wrapper {
		position: fixed;
		top: 40px !important;
		right: 0px;
		bottom: 0;
		left: 26px;
		overflow: auto;
	}

	.add .add-input .el-dialog {
		width: 30%;
		height: 174px!important;
	}

	.add .el-dialog__header {
		padding: 20px 20px 10px 20px;
	}

	.add .el-form-item {
		margin-bottom: 0px!important;
	}

	.add .add-input .el-dialog__body {
		padding: 0px 20px;
		margin: 5px 0px;
	}

	.el-dialog__body h3 {
		margin: 0px;
	}

	.right-box .tablebox {
		margin-top: 14px;
		height: 578px;
	}

	.right-box .has-gutter th {
		padding: 6px 0px !important;
	}

	.table1 {
		border: 1px solid #E8E8E8;
		border-collapse: collapse;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		margin: 15px 0px;
	}

	.table1 th {
		border: 1px solid #E8E8E8;
		background: #FAFAFA;
		font-size: 14px;
		text-align: left;
		height: 30px;
	}

	.table1 td {
		border: 1px solid #E8E8E8;
		height: 50px;
		color: #7F7F7F;
		font-size: 12px;
	}

	.table1 input {
		border: 1px solid #E8E8E8;
		outline: none;
	}

	.tc-cont {
		display: flex;
	}

	.tc-cont p {
		margin: 6px 0px;
	}

	.tc-cont .left {
		flex: 75%;
	}

	.tc-cont .left-box {
		border: 1px solid #E8E8E8;
		padding: 10px 20px;
		margin-right: 15px;
	}

	.tc-cont .right {
		flex: 25%;
	}

	.tc-cont .right-box {
		border: 1px solid #E8E8E8;
		padding: 10px 20px;
	}

	.dyl .el-dialog {
		width: 1140px;
		height: 800px;
		margin-left: 200px;
	}

	.dyl .el-dialog__body {
		padding: 10px 20px;
	}

	.dyl .el-dialog__header {
		padding: 0px;
	}

	.tc h5 {
		margin: 0px;
		padding: 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	h3 {
		padding: 0px 0px 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	.jbxx {
		padding: 0px 20px;
	}

	.fjxx {
		padding: 0px 20px;
	}

	h6 {
		margin: 10px 0px;
	}

	.jbxx p {
		color: #FF6161;
	}

	.pf {
		display: flex;
		justify-content: space-between;
		margin: 25px 0px;
		padding: 0px !important;
	}

	.jbxx .pf .el-input__inner {
		width: 330px;
		margin: 0px !important;
	}

	.pf-one {
		flex: 1;
	}

	.jbxx .el-input__inner {
		width: 400px;
	}

	.el-dialog {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	.cell>button:nth-child(1) {
		color: #078BFF !important;
		transform: scale(1);
	}

	.cell>button:nth-child(2) {
		color: #F17B70 !important;
		transform: scale(1);
	}

	.fyq {
		margin: 10px 0px;
		display: flex;
		justify-content: space-between;
	}

	.fyq span {
		font-size: 14px;
		color: #9093A6;
	}

	.el-pagination {
		display: inline-block;
	}

	.fyq-r select {
		height: 28px;
		border: 1px solid #DCDCDC;
		outline: none;
		padding: 2px 0px;
	}

	.title {
		background: #E6F7FF;
		border: #A4DDFF 1px solid;
		margin: 10px 0px 10px 10px;
	}

	.title h3 {
		padding: 4px 0px;
		margin: 0px 0px 0px 10px;
	}

	.cont {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 20px;
	}

	.cont-title {
		padding: 10px 6px;
		border-bottom: 1px solid #F9F9F9;
	}

	.cont-title span {
		padding: 10px 6px;
		margin-right: 30px;
		color: #B3B3B3;
	}

	.cont-title .active {
		color: #0188FF;
		border-bottom: #0188FF 3px solid;
	}

	.cont-box {
		width: 100%;
		height: 490px;
		border: 1px solid #F3F3F3;
		box-sizing: border-box;
		margin: 20px 0px;
	}

	.purple {
		background: #8071EE;
		color: white;
	}

	.btn {
		margin: 20px 20px;
	}

	.el-button {
		transform: scale(0.8)
	}

	.cont-box .pf {
		display: flex;
		padding: 0px 20px !important;
	}

	.pf .el-input__inner {
		width: 217px;
	}

	.pf .el-input__inner {
		margin: 0px 9px;
	}

	.table {
		padding: 0px 20px;
		margin-top: 20px;
	}
</style>
